<template>
    <div class="wrap ">
        <div class="flexWrap">
            <div class="leftWrap">
                <div class="app-button-container">
                    <el-button type="primary" @click="dialogLeftTop1_1_show()"> 新建</el-button>
                </div>

                <div class="filter-container">
                    <div class= 'filterBox'>
                    <div class='leftPart filterPart'>
                    </div>
                    <div class='rightPart filterPart'>
                        <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter.keywords">
                        </el-input>
                        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getListBySearch">搜索</el-button>
                    </div>
                    </div>
                </div>
                <complexTable
                :hasSelection= false :list = 'tableList1' :totalList = 'totalList1' :theadList = "bedConst.theadList1" :operationButtons = 'bedConst.operationButtons1' :statusArr = 'bedConst.statusArr' @operationEvent0 = 'operationEvent1_0'
                @operationEvent1 = 'operationEvent1_1' @operationEvent2 = 'operationEvent1_2' @getListByPagination = 'getListByPagination'
                ></complexTable>
            </div>
            <div class="rightWrap">
              <category :options = 'options' @selectedType = 'selectedType'></category>
            </div>
        </div>
        <el-dialog  :title="dialogLeftTop1_1_title" :visible.sync="dialogLeftTop1_1" class='dialogLeftTop1_1'>
            <el-form ref="formLeftTop1" :model="formLeftTop1" :inline="true"  label-width="100px"> 
                <el-form-item label="病房类别">
                <el-select v-model="formLeftTop1.wardId" placeholder="请选择手术类型" style= 'width: 196px;'>
                    <el-option v-for = 'item in bedConst.wardTypeArr' :label="item.label" :value="item.value" :key = 'item.value'></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="病房名称">
                    <el-input v-model ='formLeftTop1.roomName' style= 'width: 196px;'></el-input>
                </el-form-item>
                
                <el-form-item label="床位号">
                    <el-input v-model ='formLeftTop1.bedNo' style= 'width: 196px;'></el-input>
                </el-form-item>
                
                <el-form-item label="状态">
                <el-select v-model="formLeftTop1.status" placeholder="请选择启用标识" style= 'width: 196px;'>
                    <el-option v-for = 'item in bedConst.statusSelectArr' :label="item.label" :value="item.value" :key = 'item.value'></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="是否加床">
                <el-select v-model="formLeftTop1.isAdd" placeholder="请选择是否加床" style= 'width: 196px;'>
                    <el-option v-for = 'item in bedConst.addBedArr' :label="item.label" :value="item.value" :key = 'item.value'></el-option>
                </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogLeftTop1_1 = false">取 消</el-button>
                <el-button type="primary" @click="formLeftTop1_submit()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog  title="手术简介预览" :visible.sync="dialogLeftTop1_2" class='dialogLeftTop1_2'>
            <div v-html = 'formLeftTop2'></div>
        </el-dialog>
        <el-dialog  title="退出日间" :visible.sync="dialogLeftTop1_3" class='dialogLeftTop1_3'>
            <el-form ref="formLeftTop3" :model="formLeftTop3" label-width="80px">
                <el-form-item label="类型">
                <el-select v-model="formLeftTop3.type" placeholder="请选择取消类型" >
                    <el-option label = '病人取消' value ='type1'></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="取消原因">
                <el-select v-model="formLeftTop3.content" placeholder="请选择取消原因" >
                    <el-option label = '不好' value ='bad'></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="备注">
                <el-input type="textarea" v-model = 'formLeftTop3.remark'></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogLeftTop1_3 = false">取 消</el-button>
                <el-button type="primary" @click="dialogLeftTop1_3 = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import waves from '@/directive/waves/index.js'
    import Tinymce from '@/components/Tinymce'
    import complexTable from '@/views/table/complexTable'
    import category from 'yimiviews/components/category'
    import { bedConst } from '@/yimiviews/knowledgeManage/columnsConst'
    import { pending, postForm } from '@/api/knowledgeManage/bed'
    const defaultForm = {
      wardType: '',
      wardName: '',
      bedNum: '',
      addBed: '',
      status: ''
    }
    export default {
      directives: { waves },
      components: { category, complexTable, Tinymce },
      mounted() {
        this.handleFilter(this.listQuery)
      },
      data() {
        return {
          dialogLeftTop1_1: false,
          dialogLeftTop1_2: false,
          dialogLeftTop1_3: false,
          bedConst,
          tableList1: [],
          totalList1: 0,
          listQuery: {
            page: 1,
            limit: 5
          },
          filter: {
            type: '',
            keywords: ''
          },
          dialogLeftTop1_1_title: '',
          formLeftTop1: Object.assign({}, defaultForm),
          formLeftTop2: '',
          formLeftTop3: {
            type: '',
            content: '',
            remark: ''
          }
        }
      },
      methods: {
        formLeftTop1_reset() {
          this.formLeftTop1 = Object.assign({}, defaultForm)
        },
        formLeftTop1_submit() {
          postForm(this.formLeftTop1).then((res) => {
            this.dialogLeftTop1_1 = false
            this.$message({
              message: '恭喜你，提交成功!',
              type: 'success'
            })
            this.handleFilter(this.listQuery)
          })
        },
        dialogLeftTop1_1_show() {
          this.dialogLeftTop1_1 = true
          this.dialogLeftTop1_1_title = '新建'
          this.formLeftTop1_reset()
        },
        getListBySearch() {
          this.listQuery.page = 1
          this.handleFilter(this.listQuery)
        },
        getListByPagination(listQuery) {
          this.listQuery = listQuery
          pending(listQuery).then(res => {
            this.tableList1 = res.data.list
            this.totalList1 = parseInt(res.data.total)
          })
        },
        handleFilter(listQuery) {
          const query = Object.assign({}, listQuery, this.filter)
          pending(query).then(res => {
            this.tableList1 = res.data.list
            this.totalList1 = parseInt(res.data.total)
          })
        },
        operationEvent1_0(row) {
          this.formLeftTop1_reset()
          this.dialogLeftTop1_1_title = '编辑'
          this.formLeftTop1 = Object.assign({}, row)
          this.dialogLeftTop1_1 = !this.dialogLeftTop1_1
        },
        operationEvent1_1(row) {
          this.formLeftTop2 = row.description
          this.dialogLeftTop1_2 = !this.dialogLeftTop1_2
        },
        operationEvent1_2() {
          this.dialogLeftTop1_3 = !this.dialogLeftTop1_3
        }
      }
    }
</script>

<style lang="scss">
.wrap{
    .flexWrap{
        display: flex;
        height: 100%;
        background-color: #fff;
        overflow-y: scroll;
        overflow-x: hidden;
        .leftWrap{
            flex: 10;
        }
        .rightWrap{
            flex: 2;
        }
    }

    .filterBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .filterPart{
        line-height: 2;
        }
    }
    .dialogLeftTop1_1{
        .el-select{
            display: block;
        }
    }
    .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
}
</style>
